<template>
  <div class="index-page">
    <pageHead title='推广链接'></pageHead>
    <main class="flex flexJcent flexAtcent">
      <div class="qe">
        <i><img
            src="../include/img/spread_qe.png"
            alt=""
          ></i>
        <p>点击右上角按钮分享二维码</p>
      </div>
      <div class="btn flex">
        <span
          v-for="(item, index) in btns"
          :key="index"
          @click="btnsItem(index)"
          v-text="item.text"
        ></span>
      </div>
    </main>
  </div>
</template>

<script>
import pageHead from '@/components/include/header'
export default {
  components: { pageHead },
  data () {
    return {
      btns: [
        {
          text: '会员激活'
        },
        {
          text: '新会员注册'
        }
      ]
    }
  },
  activated: function () {},
  mounted: function () {},
  methods: {
    btnsItem: function (e) {
      if (e === 0) {
        this.$router.push({
          path: 'spread/activation'
        })
      } else if (e === 1) {
        this.$router.push({
          path: 'spread/register'
        })
      }
    }
  },
  destroyed: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  main {
    position: absolute;
    left: 0;
    top: 0.88rem;
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
    background: url("../include/img/spread_back.png") no-repeat;
    background-size: 100%;
    flex-direction: column;
    .qe {
      i {
        width: 3rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      p {
        text-align: center;
        font-size: 0.24rem;
        color: #a0a0a0;
        margin-top: 0.1rem;
      }
    }
    .btn {
      flex-direction: column;
      width: auto;
      height: auto;
      span {
        font-size: 0.3rem;
        margin-top: 0.6rem;
        color: #ffffff;
        display: block;
        text-align: center;
        width: 6rem;
        height: 0.8rem;
        line-height: 0.8rem;
        background: #0192dd;
        border-radius: 0.5rem;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}
</style>
